<!--
 * @Date: 2022-05-26 11:06:19
 * @Author: 陶子
 * @LastEditTime: 2023-06-19 11:31:42
 * @FilePath: \jk_one-stop_pc\src\views\bigView\production\productionFullView.vue
 * @pageName: 这是--(生产大屏主页面)--页面
-->
<template>
  <div class="outBox">
    <div class="topBox">
      <div class="topLeftBox">
        <div class="topLeft_top">
          <div class="topLeftTop_border">
            <productionTrend ref="productionTrend" :trendData="trendData" />
          </div>
        </div>
      </div>
      <div class="topCenterBox">
        <div class="topCenterBox_center">
          <div class="topLeftTop_border">
            <productionInfo ref="productionInfo" :infoData="infoData" />
          </div>
        </div>
      </div>
      <div class="topRightBox">
        <div class="topRight_bot">
          <div class="topLeftTop_border">
            <rejectedGood ref="rejectedGood" :rejectData="rejectData" />
          </div>
        </div>
      </div>
    </div>
    <div class="botBox">
      <div class="botLeftBox">
        <div class="topLeftTop_border">
          <publicRoll ref="publicRoll" :rollData="orderData" headerTitle="生产工单">
            <div class="tableHeaderBox" slot="tableHeader">
              <div class="tableOne">工单编号</div>
              <div class="tableTwo">产品编号</div>
              <div class="tableThree">产品名称</div>
              <div class="tableFour">规格</div>
              <div class="tableFive">工作状态</div>
              <div class="tableSix">计划完成时间</div>
              <div class="tableSeven">计划生产数</div>
              <div class="tableEight">已生产数(合格)</div>
              <div class="tableNine">已生产进度(合格)</div>
            </div>
            <div class="rowClass" slot="rowBox" slot-scope="{ item }">
              <div class="itemBoxOne">{{ item.orderCode }}</div>
              <div class="itemBoxTwo">{{ item.serialNumber }}</div>
              <div class="itemBoxThree">{{ subStrText(item.serialName, 6) }}</div>
              <div class="itemBoxFour">{{ subStrText(item.serialSpecifications, 6) }}</div>
              <div class="itemBoxFive" :style="{ color: checkStatusColor(item.orderStatus) }">
                {{ item.orderStatus == 1 ? '生产中' : '未开始' }}
              </div>
              <div class="itemBoxSix" :style="{ color: checkColor(item) }">
                {{ moment(item.planEndTime).format('YYYY-MM-DD HH:mm') }}
              </div>
              <div class="itemBoxSeven">{{ numFormat(item.planProduceNum) }}</div>
              <div class="itemBoxEight">{{ numFormat(item.qualifiedNum) }}</div>
              <div class="itemBoxNine">
                <a-progress :percent="(item.qualifiedNum / item.planProduceNum) * 100" style="width: 85%"
                  :strokeColor="checkStockColor((item.qualifiedNum / item.planProduceNum) * 100)">
                  <template #format="percent">
                    <div style="color: #ffffff">
                      {{ ((item.qualifiedNum / item.planProduceNum) * 100).toFixed(0) }}%
                    </div>
                  </template>
                </a-progress>
              </div>
            </div>
          </publicRoll>
        </div>
      </div>
      <!-- <div class="botRightBox">
        <div class="rightBox_right">
          <div class="topLeftTop_border">
            <feedProcess ref="feedProcess" :feedProcessData="feedProcessData" />
          </div>
        </div>
      </div> -->
    </div>
  </div>
</template>

<script>
import {
  queryByKey,
  getProductionTrendChart,
  getNotQualifiedTrendChart,
  queryProductMaterialProgressList,
  getProductBlockChart,
  BigScreenOrderList,
} from '@/api/productOrder'
import publicRoll from '../publicRoll.vue' //公共滚动工单
import productionInfo from './components/productionInfo.vue' //生产大屏信息
import feedProcess from './components/feedProcess.vue' //生产投料进度
import rejectedGood from './components/rejectedGood.vue' //不合格品趋势图（近十天）
import productionTrend from './components/productionTrend.vue' //产量趋势图（近十天）
import { numFormat, compareDate, subStrText } from '@/utils/util'
import moment from 'moment'
export default {
  components: {
    publicRoll,
    productionInfo,
    feedProcess,
    rejectedGood,
    productionTrend,
  },
  watch: {},
  data() {
    return {
      subStrText,
      moment,
      numFormat,
      trendData: [],
      rejectData: [],
      feedProcessData: [],
      orderData: [],
      infoData: {},
      timeOut: 0,
      seter: null,
    }
  },
  beforeDestroy() {
    clearInterval(this.seter)
  },
  created() {
    let timeObj = {
      key: 'bigScreenRefreshTime',
    }
    queryByKey(timeObj).then((res) => {
      if (res.code == 200) {
        this.timeOut = res.result
        this.createSet()
      } else {
        this.$antdMessage.error(res.message)
      }
    })
    this.getAllData()
  },
  methods: {
    getAllData() {
      let obj = {
        pageSize: 9999,
        pageNo: 1,
      }
      // 产量趋势图
      getProductionTrendChart().then((res) => {
        if (res.code == 200) {
          this.trendData = res.result
        } else {
          this.$antdMessage.error(res.message)
        }
      })
      // 不合格品趋势图
      getNotQualifiedTrendChart().then((res) => {
        if (res.code == 200) {
          this.rejectData = res.result
        } else {
          this.$antdMessage.error(res.message)
        }
      })
      //  日生产总量
      getProductBlockChart().then((res) => {
        if (res.code == 200) {
          this.infoData = res.result
        } else {
          this.$antdMessage.error(res.message)
        }
      })
      //生产工单
      BigScreenOrderList(obj).then((res) => {
        if (res.code == 200) {
          this.orderData = res.result
        } else {
          this.$antdMessage.error(res.message)
        }
      })

      // 生产投料进度
      // queryProductMaterialProgressList(obj).then((res) => {
      //   if (res.code == 200) {
      //     this.feedProcessData = res.result.records.map((item) => {
      //       let obj = { ...item }
      //       // obj.feedingSchedule = 38
      //       return obj
      //     })
      //   } else {
      //     this.$antdMessage.error(res.message)
      //   }
      // })
    },
    createSet() {
      this.seter = setInterval(() => {
        this.getAllData()
      }, this.timeOut)
    },
    checkStatusColor(status) {
      let statusColor = ''
      if (status == 'inProduction') {
        statusColor = '#30FDFF'
      } else {
        statusColor = '#F56F2E'
      }
      return statusColor
    },
    checkColor(row) {
      let colorStr = ''
      let currentTime = new Date(+new Date() + 8 * 3600 * 1000).toJSON().substr(0, 19).replace('T', ' ')
      let checkResult = compareDate(row.planEndTime, currentTime)
      if (checkResult) {
        colorStr = ''
      } else {
        colorStr = '#F32144'
      }
      return colorStr
    },
    checkStockColor(colorNum) {
      let numValue = ''
      if (colorNum == 0) {
        numValue = '#D2D2D2'
      } else if (100 >= colorNum > 0) {
        numValue = '#42DBEC'
      } else {
        numValue = '#F32144'
      }
      return numValue
    },
  },
}
</script>

<style scoped lang="less">
.flex(@jc, @ai, @fd: row) {
  display: flex;
  justify-content: @jc;
  align-items: @ai;
  flex-direction: @fd;
}

.outBox {
  box-sizing: border-box;
  padding: 0 0.23rem;
  height: 100%;

  .topBox {
    .flex(space-between, flex-start);
    margin-top: 0.25rem;

    .topLeftBox {
      width: 7rem;

      .topLeft_top {
        width: 100%;
        height: 5.95rem;

        .topLeftTop_border {
          height: 100%;
          box-sizing: border-box;
          padding: 0 0.25rem 0.25rem;
          background-image: url('~@/assets/img/production_one.png');
          background-size: 100% 100%;
          background-position: center center;
        }
      }
    }

    .topCenterBox {
      flex: 1;
      margin: 0 0.25rem;
      overflow: hidden;

      .topCenterBox_center {
        width: 100%;
        height: 5.95rem;

        .topLeftTop_border {
          box-sizing: border-box;
          padding: 0 0.29rem 0.5rem;
          background-image: url('~@/assets/img/screen-p3.png');
          background-size: 100% 100%;
          background-position: center center;
        }
      }
    }

    .topRightBox {
      width: 7rem;
      height: 100%;

      .topRight_bot {
        width: 100%;
        height: 5.95rem;

        .topLeftTop_border {
          height: 100%;
          box-sizing: border-box;
          padding: 0 0.25rem 0.25rem;
          background-image: url('~@/assets/img/production_one.png');
          background-size: 100% 100%;
          background-position: center center;
        }
      }
    }
  }

  .botBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.25rem;

    .botLeftBox {
      flex: 1;
      height: 6.85rem;
      overflow: hidden;

      // margin-right: 0.25rem;
      .topLeftTop_border {
        height: 100%;
        box-sizing: border-box;
        padding: 0 0.26rem 0.25rem 0.29rem;
        background-image: url('~@/assets/img/screen-p9.png');
        background-size: 100% 100%;
        background-position: center center;
      }
    }

    .botRightBox {
      width: 7rem;

      .rightBox_right {
        height: 6.85rem;
        width: 100%;

        .topLeftTop_border {
          height: 100%;
          box-sizing: border-box;
          padding: 0 0.25rem 0.25rem;
          background-image: url('~@/assets/img/production_one.png');
          background-size: 100% 100%;
          background-position: center center;
        }
      }
    }
  }
}

div.tableHeaderBox {
  font-size: 0.18rem;
  color: #fff;
  background: rgba(0, 119, 255, 0.12);
  margin-top: 0.22rem;
  .flex(flex-start, center);
  box-sizing: border-box;
  padding: 0.2rem;

  div.tableOne {
    width: 2.2rem;
  }

  div.tableTwo {
    width: 2.2rem;
  }

  div.tableThree {
    width: 2rem;
    margin-right: 0.2rem;
  }

  div.tableFour {
    width: 1.6rem;
    margin-right: 0.2rem;
  }

  div.tableFive {
    width: 2.5rem;
    // width: 1.2rem;
  }

  div.tableSix {
    width: 2.5rem;
    // width: 1.9rem;
  }

  div.tableSeven {
    width: 2.5rem;
    // width: 1.3rem;
  }

  div.tableEight {
    width: 2.6rem;
    // width: 1.3rem;
  }

  div.tableNine {
    flex: 1;
  }
}

.rowClass {
  color: #87bbf5;
  font-size: 0.18rem;
  .flex(flex-start, center);

  div.itemBoxOne {
    // width: 2rem;
    width: 2.2rem;
  }

  div.itemBoxTwo {
    // width: 2rem;
    width: 2.2rem;
  }
}

div.itemBoxThree {
  width: 2rem;
  margin-right: 0.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

div.itemBoxFour {
  width: 1.6rem;
  margin-right: 0.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

div.itemBoxFive {
  width: 2.5rem;
}

div.itemBoxSix {
  width: 2.5rem;
}

div.itemBoxSeven {
  width: 2.5rem;
}

div.itemBoxEight {
  width: 2.6rem;
}

div.itemBoxNine {
  flex: 1;

  /deep/.ant-progress-inner {
    background: rgba(210, 210, 210, 0.29);
  }
}
</style>
